<template>
  <div id='newlist' style="height:100%">
    <view-box ref="viewBox" body-padding-top="42px">
      <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" title="新闻列表" :transition="headerTransition" @on-click-more="onClickMore">
        <a href="./#/racelist" style="font-size:24px" slot="right">
          <i class="fa fa-home fa-fw"></i>
        </a>

      </x-header>

      <scroller height="-93" lock-x scrollbar-y use-pullup @on-pullup-loading="load" ref="demo1" v-model="demo4Value">

        <div>
          <card>
            <div slot="content" class="card-padding">
              <panel style="position:relative" header="" :list="list" :type="type"></panel>
            </div>
          </card>
        </div>

        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>

      </scroller>

      <!-- <card :header="{title: '新闻列表' }">
        <div slot="content" class="card-padding">
          <scroller height="-120" lock-x scrollbar-y use-pullup @on-pullup-loading="load" ref="demo1" v-model="demo4Value">
            <div class="box2">
              <panel style="position:relative" header="" :list="list" :type="type"></panel>
            </div>

            <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
              <span v-show="demo4Value.pullupStatus === 'default'"></span>
              <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
              <span v-show="demo4Value.pullupStatus === 'loading'">
                <spinner type="ios-small"></spinner>
              </span>
            </div>
          </scroller>
        </div>
      </card> -->

      <!-- <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;"></x-header> -->

      <myFooter :page="pageConfig"></myFooter>
    </view-box>

  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒
//let host = "http://jiangtao.v3.ihuipao.com/";


import Myheader from "@/common/components/myheader.vue";
import myFooter from "@/common/components/myfooter.vue";

import { cookie } from "vux";

import {
  Card,
  XHeader,
  Scroller,
  Divider,
  Spinner,
  ViewBox,
  Panel,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

import { isIdNumber, setTitle } from "@/common/js/main.js";
import mixin from '@/common/js/mixin.js'


export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      pagenum: 10,
      stop: false,
      pageConfig: window.pageConfig,
      type: "1",
      demo4Value: {
        pullupStatus: "default"
      },
      list: []
    };
  },
  computed: {
    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  beforeCreate() {
    setTitle("新闻列表");
  },
  created() {
    // 判断环境
    // web-view下的页面内
    console.log(window.location.href)


    this.getNewList();
  },
  mounted() {},
  methods: {
    onClickMore() {},
    getNewList(config) {
      let _this = this;
      if (!!this.stop) {
        return;
      }
      axios
        .post(`${host}post/list`, qs.stringify({ pagenum: this.pagenum }))
        .then(
          response => {
            if (response.data.code == "200") {
              let list = [];
              response.data.data.data.map(function(item, index) {
                if (!item.cover) {
                  item.cover = "//r3.ihuipao.cn/wuxih5/baoming/dist/static/logo.png";
                }
                list.push({
                  src: `${item.cover}`,
                  title: `${item.subject}`,
                  desc: `${item.created_at.split(" ")[0]}`,
                  url: `./new_detail?page_id=${item.id}`
                });
              });
              this.list = list;

              if (this.list.length >= response.data.data.total) {
                this.stop = true;
              } else {
                this.stop = false;
              }
              _this.demo4Value.pullupStatus = "default";

              //console.log(this.list)
            }
          },
          error => {
            console.log(error);
          }
        );
    },
    load() {
      let _this = this;
      this.pagenum += 10;
      this.getNewList();
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Card,
    XHeader,
    Scroller,
    Divider,
    Spinner,
    ViewBox,
    Panel,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    myFooter
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
#newlist .weui-media-box__desc {
  position: relative;
  top: 15px;
}

#newlist .card-padding {
  padding: 0;
}

.footerBanner {
  display: none;
}

// #newlist .weui-media-box__title{
//      position: relative;
//     top: 15px;
// }
</style>






